<template>
	<view class="">
		<view class="withdrawal_title">
			可提现金额
		</view>
		<view class="withdrawal_num">
			¥{{allprice}}
		</view>
		<view class="withdrawal_card">
			<view class="tip">
				提现金额
			</view>
			<view class="inp">
				<text class="text">￥</text>
				<input type="text" v-model="priceValue">
				<view class="FX1"></view>
				<text class="all" @click="all">
					全部提现
				</text>
			</view>
		</view>
		<view class="withdrawal_to">
			<text>提现至</text>
			<text @click="showPopup">{{cardType}}&nbsp;&nbsp;></text>
		</view>
		<u-popup mode="bottom" custom-style="background: none" :show="show" @close="onClose">
			<view class="showCount">
				<image class="close" @click="onClose" src="../../../static/yhk2.png" mode=""></image>
				<view class="title">选择到账银行卡</view>
				<view class="cardList" v-for="(item,index) in cardList" :key="index" @click="activeCard(item,index)">
					<text :class="['cardName',index==active ? 'active' : '']">{{item.value}}</text>
					<view class="FX1"></view>
					<image v-if="index==active" src="../../../static/yhk3.png" mode=""></image>
				</view>
				<navigator class="cardList" url="/pages/user/wallet/add_bank_card">
					<text class="cardName">使用新的提现方式</text>
					<view class="FX1"></view>
					<image src="../../../static/yhk1.png" mode=""></image>
				</navigator>
			</view>
		</u-popup>
				
	</view>
</template>


<script>
	export default {
		data() {
			return {
				allprice:1000.01,
				priceValue:'',
				cardType:'暂未绑定，前往绑定',
				show: false,
				active:null,
				cardList:[
					{
						id: 0,
						value: '建设银行 储蓄卡（0235）'
					},
					{
						id: 1,
						value: '支付宝（1235265467）'
					}
				]
			}
		},

		onShow() {

		},
		methods: {
			all(){
				this.priceValue = this.allprice
			},
			showPopup() {
				this.show = true
			},
			onClose() {
				this.show = false
			},
			activeCard(e,index){
				this.active = index
				this.cardType = e.value
				this.onClose()
			}
		}
	}
</script>
<style>
	page {
		background: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.withdrawal_title{
		margin-left: 60rpx;
		padding-top: 58rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
	}
	.withdrawal_num{
		margin-left: 60rpx;
		margin-top: 31rpx;
		font-weight: 300;
		font-size: 48rpx;
		color: #333333;
	}
	.withdrawal_card{
		width: 700rpx;
		height: 250rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 20rpx 0rpx rgba(24,82,206,0.2);
		border-radius: 40rpx;
		margin-left: 25rpx;
		margin-top: 60rpx;
		margin-bottom: 64rpx;
		.tip{
			padding-left: 35rpx;
			padding-top:41rpx;
			font-size: 24rpx;
			color: #333333;
		}
		.inp{
			padding-left: 40rpx;
			padding-right: 46rpx;
			padding-top: 86rpx;
			padding-bottom: 40rpx;
			display: flex;
			align-items: center;
			.text{
				font-weight: bold;
				font-size: 48rpx;
				color: #333333;
				line-height: 50rpx;
			}
			input{
				width: 70%;
				margin-left: 10rpx;
				font-weight: bold;
				font-size: 40rpx;
				color: #333333;
				padding: 0;
			}
			.all{
				font-weight: 400;
				font-size: 24rpx;
				color: #0F4BCB;
			}
		}
	}
	.withdrawal_to{
		margin: 0 60rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		margin-bottom: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.showCount{
		background-color: #FFFFFF;
		padding: 40rpx 30rpx 174rpx 30rpx;
		.close{
			width: 30rpx;
			height: 30rpx;
			margin-left: 21rpx;
		}
		.title{
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			text-align: center;	
			padding-top: 12rpx;
			padding-bottom: 73rpx;
			width: 690rpx;
			height: 2rpx;
			border-bottom: 2rpx solid #D3D3D3;
		}
		.cardList{
			display: flex;
			align-items: center;
			padding: 48rpx 35rpx;
			border-bottom: 2rpx solid #D3D3D3;
			.cardName{
				font-weight: 300;
				font-size: 30rpx;
				color: #333333;
			}
			image{
				width: 30rpx;
				height: 30rpx;
				margin-top: 6rpx;
			}
			.active{
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
			}
		}
	}

</style>